<template>
  <div class="userbox">
    <div class="fontCenter">
         <transition name="fade" appear enter-active-class="animated animate__headShake" leave-active-class="animated animate__zoomOutDown">
            <p class="name">刘 金 鹏 <span>2002-12-11</span></p>
         </transition>
      <transition appear
                  enter-active-class="animated animate__zoomInUp">
        <p class="brief1">爱好： 游戏、旅游、拍照、不断学习先进知识、敲代码</p>
      </transition>
      <transition appear
                  enter-active-class="animated animate__zoomInUp">
        <p class="brief2">特长： 熟练使用计算机、适应能力强、勇于担当、乐观活泼</p>
      </transition>
      <transition appear
                  enter-active-class="animated animate__zoomInUp">
        <p class="brief3">座右铭： 世上没有绝望的处境，只有对处境绝望的人</p>
      </transition>
    </div>
    <div class="robar"></div>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    return {}
  },
})
</script>

<style lang="scss" scoped>
.userbox {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/images/079-01.jpg');
  background-size: 100% 100%;
  position: relative;
  .robar {
    width: 3%;
    height: 8%;
    background-image: url('../../assets/images/7.29-02.png');
    background-size: 100% 100%;
    position: absolute;
    top: 48%;
    left: 20%;
    animation: jump 0.6s ease-in-out infinite alternate;
  }
  .fontCenter {
    width: 30%;
    position: absolute;
    top: 20%;
    right: 20%;
    color: #fff;

    .name {
      font-size: 50px;
      font-weight: bold;
      padding-bottom: 15px;
      span {
        font-size: 15px;
        color: rgb(179, 179, 179);
      }
    }
    .brief1 {
      padding-left: 30px;
    }
    .brief2 {
      padding-left: 60px;
    }
    .brief3 {
      padding-left: 90px;
    }
    .brief1,
    .brief2,
    .brief3 {
      line-height: 50px;
      font-size: 18px;
      color: rgb(206, 206, 206);
      background-image: -webkit-linear-gradient(
        right,
        rgb(94, 81, 81),
        rgb(243, 243, 243)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  @keyframes jump {
    from {
      top: 48%;
    }
    to {
      top: 47%;
    }
  }
}
</style>
